
import {useState , useEffect} from 'react';
import axios from 'axios';

// useEffect接受两个参数：一个是副作用函数，另一个是依赖数组。
//作用： 用于处理副作用操作。副作用是指在组件渲染过程中，可能会对外部环境产生影响的操作

// const url = 'https://geek.itheima.net/v1_0/channels';
// function UseEffectFn(){ 
//     const [list , setList] = useState([])
//     useEffect(()=>{
//        async function getList(){
//            const res = await fetch(url);
//            const data = await res.json();// 使用fetch 请求的 话  需要使用 json()的方法解析数据
//            setList(data.data.channels)
//            console.log(data)
//         }
//         getList();
//     },[]);
//     return(<ul>
//       {list.map((item,index) =><li key ={item.id}>{index+1}、{item.name}</li>)}
//     </ul>)

// }

//清除 useEffect副作用
function Son(){
    useEffect(()=>{
        // const timer = setInterval(()=>{
        //     console.log('我被触发了'); 
        // },1000);
        // return ()=>{  //卸载计时器
        //     clearInterval(timer)
        // }
        axios({
            method: 'get',
            url: 'https://geek.itheima.net/v1_0/channels',
            data: {
               
            }
          }).then(res =>{
            console.log(res.data,res.data.data.channels,'==')
          })
    },[]) 
   return <div style={{color:'red'}}> 我是一会要被卸载的内容</div> 
}
function UseEffectFn(){
    const [count ,setCount] = useState(0);
    const [tim ,SetTim] = useState(true)
    /**
     * 案例一  没有依赖项 时 (初始化触发 + 组件更新就会触发)
     */
    // useEffect(()=>{                  //第二个参数不传  没有依赖项时  初始化触发一次  组件更新 都会触发
    //     console.log('我被触发了')
    // })



    /**
     * 案例二 依赖项为空数组 时  (初始化 触发)
     */
    // useEffect(()=>{ 
    //  console.log('我被触发了');      
    // },[])    //第二个参数传递一个空数组时  有依赖项时 初始化时 触发一次 之后不在触发



    /**
     * 案例三  依赖项变化时  (初始化触发 + 更新时 触发)
     */
    // useEffect(()=>{
    //     console.log('我被触发了');  
    // },[count])

    // 因此 案列 一 三 似乎是一样的 结果   其责不是   案例一 是所有状态数据变化时都更新  案列二 只有 指定数据才会变化
    return <div>
        {tim && <Son/>}
        <button onClick={()=>SetTim(false)}>计时器</button>
        <button onClick={()=>setCount(count+1)}>{count}</button>
    </div>
}
export default(UseEffectFn)
 